//
//  SwiftUIView.swift
//  SwiftUIView_Spacer
//
//  Created by 今天 T_T, T_T, T_T,  (external - Project) on 2024/8/29.
//

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        
        Text("SwiftUIView_Spacer")
        
        //示例
        HStack (spacing: nil) {
            
            Rectangle().frame(width: 100, height: 100)

            //这个东西会在框架内,尽可能大得调整大小, 在这里,这个东西,把左右两个矩形使劲往两边推
            //Spacer()
            //可以清楚地显示这个东西, 它从中心开始,向两边进行推, 它自己就自动调整大小了
            Spacer().frame(height: 10).background(Color.orange)
            
            Rectangle().fill(Color.red).frame(width: 100, height: 100)
            
        }.background(Color.blue)
        

        
        //示例
        HStack (spacing: nil) {
            
            Rectangle().frame(width: 100, height: 100)

            //这个东西会在框架内,尽可能大得调整大小, 在这里,这个东西,把左右两个矩形使劲往两边推
            //Spacer()
            //可以清楚地显示这个东西, 它从中心开始,向两边进行推, 它自己就自动调整大小了
            Spacer().frame(height: 10).background(Color.orange)
            
            Rectangle().fill(Color.red).frame(width: 200, height: 100)
            
        }.background(Color.blue)


        
        //示例
        HStack (spacing: nil) {
            
            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().frame(width: 100, height: 100)
            
            Rectangle().fill(Color.red).frame(width: 200, height: 100)
            
        }.background(Color.blue)

        
        //示例
        //如果在 Stack 中包含了很多的 spacer, 那么,这些 spacer都会自动调整为相同的大小
        HStack (spacing: 0) {
            
            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().fill(Color.red).frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().fill(Color.green).frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

        }//.background(Color.blue)

        
        
        //示例
        //如果在 Stack 中包含了很多的 spacer, 那么,这些 spacer都会自动调整为相同的大小
        HStack (spacing: 0) {
            
            // minLength length(默认值10左右) 表示,当这个视图不管怎么被压缩,那么,压到最短的长度是就是120
            // 如果这个 minLength 设置为0, 那么就直接消失了
            Spacer(minLength: 0).frame(height: 10).background(Color.orange)

            Rectangle().frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().fill(Color.red).frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().fill(Color.green).frame(width: 50, height: 50)

            Spacer(minLength: 0).frame(height: 10).background(Color.orange)

        }
        .background(Color.yellow)
        .padding(.horizontal, 200)  //StackView里面加了内边距
        .background(Color.blue)


        //示例
        // 这段代码和上面的正好做 比较, 就是去掉了 padding, Spacer(minLength: 0) 会重新填充起来,和其他的大小一样
        HStack (spacing: 0) {
            
            Spacer(minLength: 0).frame(height: 10).background(Color.orange)

            Rectangle().frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().fill(Color.red).frame(width: 50, height: 50)

            Spacer().frame(height: 10).background(Color.orange)

            Rectangle().fill(Color.green).frame(width: 50, height: 50)

            Spacer(minLength: 0).frame(height: 10).background(Color.orange)

        }
        .background(Color.yellow)
//        .padding(.horizontal, 200)
        .background(Color.blue)


        
        //示例  [全屏示例]  要把上面的都注释掉
        VStack {
            HStack (spacing: 0) {
                Image(systemName: "xmark")
                Spacer().frame(height: 10).background(Color.orange)
                Image(systemName: "gear")
            }
            .font(.largeTitle)  //可以使用这个方法, 给里面的图片一起添加大小.
            .background(Color.yellow)
            .padding(.horizontal)
            .background(Color.blue)
            Spacer().frame(width: 10).background(Color.orange)  //这个东西就尽可能地延伸, 把上面那个栈, 推到屏幕顶端
            
            Rectangle().frame(height: 55) //这个东西被推到了底部
            
        }
        .background(Color.cyan)

    }
}

#Preview {
    SwiftUIView()
}
